<template>
  <div class="batch-org-index sub-margin">
    <!-- <div class="sub-page-title">部门管理</div> -->
    <div class="content">
      <div class="right-con">
        <UnitTable ref="unitTable" :source="tableList" @edit-account="openDialog" @add-account="addAccount">
          <div slot="search" class="search-box">
            <div class="search-left">
              <div class="search-item">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchForm.orgName"
                  size="small"
                  clearable
                  @keyup.enter.native="onTableSearch">
                  <el-button slot="append" icon="el-icon-search" @click.stop="onTableSearch"></el-button>
                </el-input>
              </div>
              <el-button type="primary" size="small" plain="" @click.stop="onChangeZk">
                {{ isZk ? '展开所有' : '收起所有' }}
              </el-button>
            </div>
            <div class="search-right">
              <el-button type="primary" size="small" icon="el-icon-plus" @click.stop="onAddEdit">新建机构</el-button>
            </div>
          </div>
        </UnitTable>
      </div>
    </div>
    <AddEditOrganModel :visible.sync="showDialog" :info="curAccount" @submit="onAccountSubmit"></AddEditOrganModel>
  </div>
</template>
<script>
import UnitTable from './components/UnitTable.vue'
import AddEditOrganModel from './components/AddEditOrganModel.vue'
import { saveOrganByApi } from '@api/modules/system.js'
export default {
  name: 'batchOrgIndex',
  components: { UnitTable, AddEditOrganModel },
  emits: [],
  props: {},
  data() {
    return {
      tableList: [],
      showDialog: false,
      curAccount: {},
      searchForm: { orgName: '' },
      isZk: false,
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    onAddEdit(obj) {
      this.curAccount = { ...obj, isAddNext: false }
      this.showDialog = true
    },
    openDialog(obj) {
      this.curAccount = obj
      this.showDialog = true
    },
    addAccount(obj) {
      this.curAccount = obj
      this.showDialog = true
    },
    onAccountSubmit(obj) {
      saveOrganByApi(obj).then(res => {
        if (res.status === 200) {
          this.$message.success('操作成功')
          this.$refs.unitTable.initdata()
        }
      })
    },
    onTableSearch(obj) {
      this.$refs.unitTable.searchData(this.searchForm.orgName)
    },
    onChangeZk() {
      this.isZk = !this.isZk
      this.$refs.unitTable.onChangeZk()
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';
.batch-org-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  .content {
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 20px 0;
    height: calc(100vh - 110px);
    .right-con {
      width: 100%;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      .search-item {
        margin-right: 20px;
      }
    }
  }
}
</style>
